<template>
  <div class="home">
    <div class="home--head">
      <div
        class="home--head--item"
        @click="() => $router.push({ name: 'importData' })"
      >
        <div class="head--item--top">
          <div class="item--top--left">
            <MySvg type="import" />
          </div>
          <div class="item--top--right">
            <div :style="{ textAlign: 'right' }">Import</div>
            <div :style="{ fontSize: '25px', textAlign: 'right' }">{{total}}+</div>
          </div>
        </div>
        <div class="head--item--bottom">
          <SyncOutlined :style="{ color: '#707070' }" />
          <span :style="{ color: '#707070' }">导入数据</span>
        </div>
      </div>
      <div
        class="home--head--item"
        @click="() => $router.push({ name: 'exportData' })"
      >
        <div class="head--item--top">
          <div class="item--top--left">
            <MySvg type="export" />
          </div>
          <div class="item--top--right">
            <div :style="{ textAlign: 'right' }">Export</div>
            <div :style="{ fontSize: '25px', textAlign: 'right' }">1506+</div>
          </div>
        </div>
        <div class="head--item--bottom">
          <ReconciliationOutlined :style="{ color: '#707070' }" />
          <span :style="{ color: '#707070' }">导出数据</span>
        </div>
      </div>
      <div
        class="home--head--item"
        @click="() => $router.push({ name: 'viewData' })"
      >
        <div class="head--item--top">
          <div class="item--top--left">
            <MySvg type="show" />
          </div>
          <div class="item--top--right">
            <div :style="{ textAlign: 'right' }">Data</div>
            <div :style="{ fontSize: '25px', textAlign: 'right' }">{{total}}+</div>
          </div>
        </div>
        <div class="head--item--bottom">
          <HddOutlined :style="{ color: '#707070' }" />
          <span :style="{ color: '#707070' }">查看数据</span>
        </div>
      </div>
      <div
        class="home--head--item"
        @click="() => $router.push({ name: 'analyzeData' })"
      >
        <div class="head--item--top">
          <div class="item--top--left">
            <MySvg type="analyze" />
          </div>
          <div class="item--top--right">
            <div :style="{ textAlign: 'right' }">Analyze</div>
            <div :style="{ fontSize: '25px', textAlign: 'right' }">{{total}}+</div>
          </div>
        </div>
        <div class="head--item--bottom">
          <FundProjectionScreenOutlined :style="{ color: '#707070' }" />
          <span :style="{ color: '#707070' }">分析数据</span>
        </div>
      </div>
    </div>
    <div class="home--content">
      <div class="con--left">
        <MyEcharts ref="left" />
      </div>
      <div class="con--right">
        <MyEcharts ref="right" />
      </div>
    </div>
    <div class="home--footer">
      <div class="home--footer--item import">
        <div :style="{ color: '#fff', fontSize: '22px', marginBottom: '20px' }">
          Import
        </div>
        <div
          :style="{ color: '#000000', fontSize: '15px', marginBottom: '10px' }"
        >
          Monthly sales target
        </div>
        <a-progress
          type="circle"
          :percent="75"
          :stroke-color="{
            '0%': '#ffffff',
            '100%': '#7dd2f3',
          }"
        />
      </div>
      <div class="home--footer--item export">
        <div :style="{ color: '#fff', fontSize: '22px', marginBottom: '20px' }">
          Export
        </div>
        <div
          :style="{ color: '#000000', fontSize: '15px', marginBottom: '10px' }"
        >
          Completed
        </div>
        <a-progress
          type="circle"
          :percent="85"
          :stroke-color="{
            '0%': '#ffffff',
            '100%': '#9fe080',
          }"
        />
      </div>
      <div class="home--footer--item data">
        <div :style="{ color: '#fff', fontSize: '22px', marginBottom: '20px' }">
          Data
        </div>
        <div
          :style="{ color: '#000000', fontSize: '15px', marginBottom: '10px' }"
        >
          Out of total number
        </div>
        <a-progress
          type="circle"
          :percent="80"
          :stroke-color="{
            '0%': '#ffffff',
            '100%': '#fe6f6f',
          }"
        />
      </div>
      <div class="home--footer--item analyze">
        <div :style="{ color: '#fff', fontSize: '22px', marginBottom: '20px' }">
          Analyze
        </div>
        <div
          :style="{ color: '#000000', fontSize: '15px', marginBottom: '10px' }"
        >
          Monthly newsletter
        </div>
        <a-progress
          type="circle"
          :percent="50"
          :stroke-color="{
            '0%': '#ffffff',
            '100%': '#fac858',
          }"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  SyncOutlined,
  ReconciliationOutlined,
  HddOutlined,
  FundProjectionScreenOutlined,
} from "@ant-design/icons-vue";
import MySvg from "../components/MySvg.vue";
import MyEcharts from "../components/MyEcharts.vue";
import * as echarts from "echarts";
import { getChineseMedicineByPage } from "@/api";
export default {
  name: "Home",
  data() {
    return {
      total:0
    };
  },
  components: {
    SyncOutlined,
    ReconciliationOutlined,
    HddOutlined,
    FundProjectionScreenOutlined,
    MySvg,
    MyEcharts,
  },
  mounted() {
    this.getChineseMedicineByPage()
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      this.initLeftData();
      this.initRightData();
    },
    initLeftData() {
      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149];
      let dataAxis = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      const option = {
        title: {
          text: "活跃用户",
          subtext: "than last week +23%",
          left: "10",
          top: "10",
        },
        grid: {
          top: "16%",
          containLabel: true,
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
              borderRadius: [20, 20, 0, 0], // 添加圆角
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
                borderRadius: [20, 20, 0, 0], // 添加圆角
              },
            },
            data: data,
          },
        ],
      };
      this.$refs.left.drawChart(option);
    },
    initRightData() {
      let base = +new Date(2000, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      const option = {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "10",
          top: "10",
          text: "年度用户量",
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: "Fake Data",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 158, 68)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 70, 131)",
                },
              ]),
            },
            data: data,
          },
        ],
      };
      this.$refs.right.drawChart(option);
    },
    async getChineseMedicineByPage() {
      let params = {
        page: 1,
        limit: 10,
      };
      const res = await getChineseMedicineByPage(
        window.CONFIG.server_url,
        params
      );
      if (res.code == 200) {
        this.total = res.data.count;
      }
    },
  },
};
</script>
<style scoped lang="less">
@import "@/assets/home.less";
</style>
